<script setup lang="ts">
import { ref, onMounted } from 'vue'

import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/theme-monokai' // 默认设置的主题
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/snippets/sql'
import 'ace-builds/src-noconflict/snippets/json'
import 'ace-builds/src-noconflict/snippets/java'
import 'ace-builds/src-noconflict/snippets/text'
const props = defineProps(['height', 'width'])
const emit = defineEmits(['handleChange'])
const aceDom = ref()
let aceEditor: any = null
const langType = ref('')
const langArray = [
    {
        name: 'JavaScript',
        path: 'ace/mode/javascript'
    },
    {
        name: 'sql',
        path: 'ace/mode/sql'
    },
    {
        name: 'Java',
        path: 'ace/mode/java'
    },
    {
        name: 'Text',
        path: 'ace/mode/text'
    },
    {
        name: 'Cpp',
        path: 'ace/mode/c_cpp'
    },
    {
        name: 'C',
        path: 'ace/mode/c_cpp'
    },
    {
        name: 'Python',
        path: 'ace/mode/python'
    },

    {
        name: 'Bash',
        path: 'ace/mode/bash'
    },
    {
        name: 'Diff',
        path: 'ace/mode/diff'
    },
    {
        name: 'Groovy',
        path: 'ace/mode/groovy'
    },
    {
        name: 'Lua',
        path: 'ace/mode/lua'
    },
    {
        name: 'Objective-C',
        path: 'ace/mode/objectivec'
    },
    {
        name: 'PHP',
        path: 'ace/mode/php'
    },
    {
        name: 'Perl',
        path: 'ace/mode/perl'
    },
    {
        name: 'Ruby',
        path: 'ace/mode/ruby'
    },
    {
        name: 'Scala',
        path: 'ace/mode/scala'
    },
    {
        name: 'Shell',
        path: 'ace/mode/sh'
    },
    {
        name: 'Swift',
        path: 'ace/mode/swift'
    },
    {
        name: 'TypeScript',
        path: 'ace/mode/typescript'
    }
];

onMounted(() => {
    init()
})
const init = () => {
    // aceEditor = ace.edit("editor") //这里不用id,以防打包后容易出错
    aceEditor = ace.edit(aceDom.value)
    //提示功能
    aceEditor.setOptions({
        enableSnippets: true,
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true
    })
    //设置默认语言
    langType.value = 'ace/mode/sql'
    aceEditor.session.setMode('ace/mode/sql')
}
const handleLang = (val: string) => {
    aceEditor.session.setMode(val)
}
const setVal = (val: string) => {
    aceEditor.setValue(val)
}
//暴露方法
defineExpose({
    setVal
})
</script>

<template>
    <div :style="{ height: props.height, width: props.width }" class="ace">
        <a-form label-width="3.125rem">
            <a-form-item label="语言">
                <a-select v-model:value="langType" class="w-30" @change="handleLang" >
                    <a-select-option
                        v-for="item in langArray"
                        :key="item.name"
                        :label="item.name"
                        :value="item.path"
                    >
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
        <div id="editor" ref="aceDom"></div>
    </div>
</template>


<style scoped lang="scss">
.ace {
    display: flex;
    flex-direction: column;

    #editor {
        flex-grow: 1;
        margin: .625rem 0;
        border: .0625rem solid #c6e2ff;
    }
}
</style>
`
